<template>
  <div class="wrapper">
    <div class="server-table">
      <div class="table-title">
        <span class="table-title-text">业务主题管理</span>
      </div>
      <div class="content">
        <div class="field" v-for="(item,i) in subjectObj" :key="i">
          <div class="field-title">
            {{item.title}}
          </div>
          <div class="top">
            <searchComp :searchIndex="i+1+''" @searchFun="searchFun"></searchComp>
            <buttonComp :addIndex="i+1+''" @addFun="addFun" :isDisable="item.isDisable"></buttonComp>
          </div>
          <themePage :themeList="item.themeList" :ref="`themePage${i+1}`"></themePage>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import searchComp from "./searchComp.vue";
  import buttonComp from './buttonComp.vue';
  import themePage from './themePage.vue';
  import {
    deepClone
  } from "@/plugins/utils/index.js";
  export default {
    name: "SubjectManagement",
    components: {
      searchComp,
      buttonComp,
      themePage,
    },
    data() {
      return {
        // 存储对应业务域中被选中项的 id
        idObj: {
          "1": 0,
          "2": null,
          "3": null,
          "4": null
        },
        addingLevel: 0,
        subjectObj: [{
            addIndex: "1",
            searchIndex: "1",
            isDisable: false,
            title: "一级业务域",
            themeList: [],
          },
          {
            addIndex: "2",
            searchIndex: "2",
            isDisable: true,
            title: "二级业务域",
            themeList: [],
          },
          {
            addIndex: "3",
            searchIndex: "3",
            isDisable: true,
            title: "三级业务域",
            themeList: [],
          },
          {
            addIndex: "4",
            searchIndex: "4",
            isDisable: true,
            title: "四级业务域",
            themeList: [],
          },
        ],
      }

    },
    created() {
      this.themeSearch({
        parentId: 0,
        themeName: ""
      });
      this.$eventBus.$on("themeAdd", this.themeAdd);
      this.$eventBus.$on("themeDelete", this.themeDelete);
      this.$eventBus.$on("themeUpdate", this.themeUpdate);
      this.$eventBus.$on("clickThemeData", this.clickThemeData);
      this.$eventBus.$on("themeMove", this.themeMove);
      this.$eventBus.$on("deleteEmpty", this.deleteEmpty);
    },
    beforeDestroy() {
      this.$eventBus.$off("themeAdd");
      this.$eventBus.$off("themeDelete");
      this.$eventBus.$off("themeUpdate");
      this.$eventBus.$off("clickThemeData");
      this.$eventBus.$off("themeMove");
    },
    methods: {
      // 获取主题数据
      async themeSearch(arg) {
        let params = {
          ...arg
        };
        let res = await this.$axios.post(this.$api.subjectManagement.themeSearch, params);
        const {
          data,
          code,
          message
        } = res.data;
        if (code !== 200) {
          this.$message.error(message);
          return;
        }
        if (data.list.length) {
          data.list.forEach(item => {
            this.subjectObj[item.level - 1].themeList = data.list;
          });
        } else {
          if (this.subjectObj[data.level - 1]) {
            this.subjectObj[data.level - 1].themeList = data.list;
            switch (data.level) {
              case 1:
                this.subjectObj[data.level].themeList = data.list;
                this.subjectObj[data.level + 1].themeList = data.list;
                this.subjectObj[data.level + 2].themeList = data.list;
                this.subjectObj[data.level].isDisable = true;
                this.subjectObj[data.level + 1].isDisable = true;
                this.subjectObj[data.level + 2].isDisable = true;
                break;
              case 2:
                this.subjectObj[data.level].themeList = data.list;
                this.subjectObj[data.level + 1].themeList = data.list;
                this.subjectObj[data.level].isDisable = true;
                this.subjectObj[data.level + 1].isDisable = true;
                break;
              case 3:
                this.subjectObj[data.level].themeList = data.list;
                this.subjectObj[data.level].isDisable = true;
                break;
              default:
                break;
            }
          }
        }
      },

      // 移动主题
      async themeMove(arg1, arg2) {
        let oldIndex = null;
        let id1 = null;
        let id2 = null;
        arg1.filter((item, index) => {
          if (item.id == arg2.id) {
            oldIndex = index;
            id1 = item.id;
          }
        });
        if (arg2.flag == "top") {
          id2 = arg1[oldIndex - 1].id;
        } else {
          id2 = arg1[oldIndex + 1].id;
        }

        let params = {
          id1,
          id2
        };
        let res = await this.$axios.post(this.$api.subjectManagement.themeMove, params);
        const {
          data,
          code,
          message
        } = res.data;
        if (code !== 200) {
          this.$message.error(message);
          return;
        }
        this.themeSearch({
          parentId: arg2.parentId,
          themeName: ""
        });
      },

      // 新建主题
      async themeAdd(arg) {
        if (arg.themeName == "") return;
        let params = {
          parentId: this.idObj[arg.level],
          themeName: arg.themeName,
        };
        let res = await this.$axios.post(this.$api.subjectManagement.themeAdd, params);
        const {
          data,
          code,
          message
        } = res.data;
        if (code !== 200) {
          this.$message.error(message);
          return;
        }
        this.themeSearch({
          ...params,
          themeName: ""
        });
        this.$message.success(message);
      },

      // 编辑主题
      async themeUpdate(arg) {
        let params = {
          id: arg.id,
          themeName: arg.themeName,
        };
        let res = await this.$axios.post(this.$api.subjectManagement.themeEdit, params);
        const {
          data,
          code,
          message
        } = res.data;
        if (code !== 200) {
          this.$message.error(message);
          return;
        }
        this.themeSearch({
          ...arg,
          themeName: ""
        });
        this.$message.success(message);
      },

      async themeDelete(arg) {
        let params = {
          id: arg.id
        };
        let res = await this.$axios.post(this.$api.subjectManagement.themeDelete, params);
        const {
          data,
          code,
          message
        } = res.data;
        if (code !== 200) {
          this.$message.error(message);
          return;
        }
        this.$message.success(message);
        this.themeSearch({
          ...arg,
          themeName: ""
        });
      },

      // 查询次级主题
      clickThemeData(arg) {
        // 保存当前选中项的 id
        this.idObj[arg.level + 1] = arg.id;
        this.subjectObj.forEach((item, index) => {
          if (index > 0) {
            item.isDisable = true;
          }
        });
        this.subjectObj.forEach((item, index) => {
          if (arg.level >= index) {
            item.isDisable = false;
          }
        });
        this.themeSearch({
          parentId: arg.id,
          themeName: ""
        });
      },

      addFun(params) {
        console.log(params, typeof params);
        this.addingLevel = params;
        switch (params) {
          case "1":
            this.dataHandle(this.subjectObj[0].themeList, 1);
            break;
          case "2":
            if (this.subjectObj[0].themeList.length == 0) {
              return;
            }
            this.dataHandle(this.subjectObj[1].themeList, 2);
            break;
          case "3":
            if (this.subjectObj[1].themeList.length == 0) {
              return;
            }
            this.dataHandle(this.subjectObj[2].themeList, 3);
            break;
          case "4":
            if (this.subjectObj[2].themeList.length == 0) {
              return;
            }
            this.dataHandle(this.subjectObj[3].themeList, 4);
            break;
        }
      },

      deleteEmpty(level) {
        if (level) {
          this.subjectObj[level - 1].themeList.pop();
        } else {
          this.subjectObj[this.addingLevel - 1].themeList.pop();
        }
      },

      dataHandle(params, index) {
        let idArr = [];
        let obj = [];
        if (params.length == 0) {
          // obj 中的 id、parentId 等知识为了形式一致, 没有实际意义
          obj.push({
            id: 0,
            themeName: "",
            parentId: parseInt(index) - 1,
            level: parseInt(index),
            selected: false,
            edit: true,
          });
          idArr = [0];
          this.subjectObj[`${index-1}`].themeList = obj;
          this.$nextTick(() => {
            setTimeout(() => {
              this.$refs[`themePage${index}`][0].$refs.input[0].focus();
            }, 100);
          });
        } else {
          params.filter(item => {
            idArr.push(item.id);
          });
          params.push({
            id: Math.max(...idArr) + 1,
            themeName: "",
            parentId: parseInt(index) - 1,
            level: index,
            selected: false,
            edit: true,
          });
          setTimeout(() => {
            document.querySelector(`.input${Math.max(...idArr) + 1} input`).focus();
          }, 100);
        }
      },

      searchFun(arg) {
        const {
          index,
          value
        } = arg;
        let params = {
          parentId: this.idObj[index],
          themeName: value
        };
        this.themeSearch(params);
      },
    },
  }
</script>

<style lang="scss" scoped>
  .wrapper {
    height: 90%;

    .server-table {
      padding: 16px 32px 64px;
      border-radius: 4px;
      background: #ffffff;
      height: 100%;

      .table-title {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .table-title-text {
          border-left: 5px solid $--color-primary;
          padding-left: 10px;
          margin: 8px 0;
          font-size: 16px;
          line-height: 16px;
        }

        margin-bottom: 10px;
      }

      .content {
        width: 100%;
        height: auto;
        display: flex;
        height: 100%;

        .field {
          flex: 1;
          border: 1px solid grey;
          height: auto;

          .field-title {
            box-sizing: border-box;
            width: 100%;
            height: 30px;
            line-height: 30px;
            background-color: #F0F5FA;
            padding-left: 20px;
            font-weight: 600;
            border-bottom: 1px solid grey;
          }

          .top {
            width: 100%;
            padding: 16px 8px;
            box-sizing: border-box;

            .add-button {
              width: 100%;
              padding-top: 16px;

              /deep/ .el-button {
                width: 100%;
              }
            }
          }

        }
      }
    }
  }
</style>